import React, { useRef, useEffect } from 'react';
import { Animated, Easing, StyleSheet, View, Dimensions } from 'react-native';

const RippleAnimation = () => {
    const rippleCount = 4; // 圆环层数
    const ripples = Array.from({ length: rippleCount }).map((_, index) => {
        const scaleValue = useRef(new Animated.Value(0)).current;
        const opacityValue = useRef(new Animated.Value(1)).current;

        useEffect(() => {
            const delay = index * 600; // 每层圆环的延迟
            Animated.loop(
                Animated.parallel([
                    Animated.timing(scaleValue, {
                        toValue: 1,
                        duration: 3000,
                        delay,
                        easing: Easing.linear,
                        useNativeDriver: true,
                    }),
                    Animated.timing(opacityValue, {
                        toValue: 0,
                        duration: 3000,
                        delay,
                        easing: Easing.linear,
                        useNativeDriver: true,
                    }),
                ]),
            ).start();
        }, [scaleValue, opacityValue]);

        return (
            <View style={styles.content}>
                <Animated.View
                    key={index}
                    style={[
                        styles.ripple,
                        {
                            transform: [{ scale: scaleValue }],
                            opacity: opacityValue,
                            backgroundColor: `rgba(37, 200, 200, ${1 - index * 0.2})`, // 颜色逐渐变浅
                        },
                    ]}
                />
            </View>
        );
    });

    return <View>{ripples}</View>;
};

const styles = StyleSheet.create({
    content: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    ripple: {
        width: 200,
        height: 200,
        borderRadius: 200,
        position: 'absolute',
        top: 0,
    },
});

export default RippleAnimation;
